<!--  -->
<template>
  <div class="index_order">
    <div class="index_order_top">
      <search>添加地址</search>
    </div>
    <div class="index_order_bom">
      <div class="background">
        <div class="address">
          <div class="info">
            <div class="addressicon">
              <van-icon
                @click="addAddress"
                class="icon1"
                name="location-o"
                size="40"
              />
            </div>
            <div v-if="isAddres" class="addressinfo">
              <div class="name">{{ myaddress.shopname }}</div>
              <div class="detailedaddress">
                {{ myaddress.address }}
              </div>
            </div>
            <div v-else class="addressinfo">
              <div class="name">请选择取货地址</div>
              <div class="detailedaddress"></div>
            </div>
            <div class="changeaddress">
              <van-icon
                class="icon2"
                name="arrow"
                @click="addAddress"
                size="7vw"
              />
            </div>
          </div>
          <div class="lace"></div>
        </div>

        <div class="product">
          <div class="productinfo">
            <van-card
              v-for="item in orderlist.orderlist"
              :key="item.id"
              :price="item.stock + '.00'"
              :num="item.number"
              :desc="item.categoryname"
              :title="item.name"
              :thumb="item.imageurl"
            />
          </div>
          <!-- <van-divider /> -->
          <div class="total">
            <div class="getstyle">到店自取</div>
            <div class="money">应付￥{{ orderlist.monery + ".00" }}</div>
          </div>
        </div>
        <div class="gettime">
          <p>请选择取餐时间</p>
          <van-radio-group
            v-model="radio"
            direction="horizontal"
            class="my-van-radio-group"
          >
            <van-radio name="0">现在取餐</van-radio>
            <van-radio name="1">10分钟后取餐</van-radio>
            <van-radio name="2">20分钟后取餐</van-radio>
            <van-radio name="3">30分钟后取餐</van-radio>
          </van-radio-group>
        </div>
        <div class="pay_hui">
          <!-- 优惠卷 -->
          <van-coupon-cell />
        </div>
        <div class="pay_hui">
          <!-- 支付方式 -->
          <van-cell
            is-link
            title="支付方式"
            cancel-text="取消"
            :round="true"
            @click="show = true"
          >
            <van-icon :name="payState" size="30" color="#1989fa" />
          </van-cell>
          <van-action-sheet
            v-model="show"
            cancel-text="取消"
            description="请选择你的支付方式"
            :actions="actions"
            @select="onSelect"
          />
        </div>
        <div class="pay_bom">
          <van-checkbox v-model="checked" checked-color="#ee0a24" />
          <span>我已阅读并同意<a href="#">《支付协议》</a></span>
        </div>
        <div></div>
      </div>
    </div>
    <van-submit-bar
      :price="orderlist.monery * 100"
      @submit="toPay"
      button-text="去支付"
    />
    <a href="#" style="visibility: hidden"></a>
  </div>
</template>

<script>
import search from "@/components/search/search.vue";
import { Toast } from "vant";
import { GetOrderMesByOid } from "@/network/order/order.js";
export default {
  components: {
    search,
  },
  data() {
    return {
      show: false,
      isAddres:false,
      myaddress:0,
      actions: [{ name: "支付宝" }, { name: "微信" }, { name: "银行卡" }],
      radio: "0",
      orderlist: [],
      payState: "alipay",
      payName: "支付宝",
      checked: true,
      timestamp:''
    };
  },
  created() {
     
  },
  //生命周期 - 创建完成（访问当前this实例）
  activated() {
    this.getOrderList();
    this.getMyAddress()
  },
  methods: {
    async getOrderList() {
      let oid = this.$route.query.oid;
      const { data: res } = await GetOrderMesByOid({ oid: oid });
      this.orderlist = res.data;
      //console.log(res.data);
    },
    //得到地址
    getMyAddress(){
       this.myaddress= JSON.parse(localStorage.getItem('myaddress'));
       if(this.myaddress!=null&&this.myaddress!=0){
         this.isAddres=true
       }
       else{
         this.isAddres=false
       }
      // console.log(this.myaddress)
    },
    //地址跳转
    addAddress() {
      this.$router.push("/index/address");
    },
    onSelect(item) {
      this.show = false;
      if (item.name == "支付宝") {
        this.payState = "alipay";
      }
      if (item.name == "微信") {
        this.payState = "wechat-pay";
      }
      if (item.name == "银行卡") {
        this.payState = "card";
      }
      this.payName = item.name;
    },
    toPay() {
      if(this.checked&&this.isAddres){
        let timeExpand=10
        //获取当前时间的时间戳
         this.timestamp =Date.parse(new Date())
         this.timestamp=this.timestamp+timeExpand*this.radio*1000*60
          let time=this.formatDate(this.timestamp);
        this.$el.lastChild.href='http://101.200.88.248:8044/alipay/alipay?ordername='+Date.parse(new Date())+'&money='+this.orderlist.monery+'&intro='+this.orderlist.orderlist[0].name+'&successUrl=http://192.168.1.15:8080/?oid='+this.$route.query.oid+'?'+time+'/#/index/pay&errorUrl=http://192.168.1.15:8080/#/index/error'
         this.$el.lastChild.click("return false");  
        console.log(this.$el.lastChild.href)
        //console.log(time)
          //Toast.success('支付成功');
      }
       if(this.checked==false){
          Toast.fail('请阅读支付协议');
      } 
      if(this.isAddres==false){
        Toast.fail('请选择取餐地址');
      }
    },
     formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + h + ':' + m + ':' + s;
      }
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@import "../assets/css/index.less";

.my-van-radio-group {
  width: 90vw;
  height: 19vw;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.background {
  padding-top: 60 * @vw;
  padding-bottom: 60 * @vw;
  width: 100vw;
  height: 165vw;
  background-color: #f5f5f5;

  .title {
    width: 100vw;
    height: 261 * @vw;
    background-color: white;
  }

  .address {
    display: flex;
    width: 1380 * @vw;
    height: 283 * @vw;
    background-color: #ffffff;
    border-radius: 10 * @vw;
    margin-top: 37 * @vw;
    margin-left: 54 * @vw;
    flex-wrap: wrap;

    .info {
      width: 1380 * @vw;
      display: flex;

      .addressicon {
        width: 204 * @vw;
        height: 266 * @vw;

        .icon1 {
          line-height: 266 * @vw;
        }
      }

      .addressinfo {
        width: 1050 * @vw;
        height: 266 * @vw;

        .name {
          width: 1075 * @vw;
          height: 166 * @vw;
          line-height: 166 * @vw;
          text-align: left;
          //    font-size: ;
          color: #463c3a;
        }

        .detailedaddress {
          width: 1075 * @vw;
          height: 100 * @vw;
          line-height: 100 * @vw;
          margin-top: -20 * @vw;
          text-align: left;
          font-size: 55 * @vw;
          color: #999999;
        }
      }

      .changeaddress {
        width: 126 * @vw;
        height: 266 * @vw;

        .icon2 {
          line-height: 266 * @vw;
        }
      }
    }

    .lace {
      width: 1380 * @vw;
      height: 17 * @vw;
      background-image: url(../assets/lace.jpg);
      background-size: 1380 * @vw 17 * @vw;
      //    margin-top: 266*@vw;
    }
  }

  .product {
    width: 1380 * @vw;
    border-radius: 50 * @vw;
    background-color: #ffffff;
    margin: 37 * @vw auto;
    display: flex;
    flex-wrap: wrap;

    .productinfo {
      width: 1380 * @vw;
    }

    .total {
      width: 1380 * @vw;
      height: 175 * @vw;
      display: flex;

      .getstyle {
        width: 665 * @vw;
        height: 175 * @vw;
        line-height: 175 * @vw;
        margin-left: 120 * @vw;
        color: #999999;
        font-size: 55 * @vw;
      }

      .money {
        width: 1380 * @vw;
        height: 175 * @vw;
        margin-left: 390 * @vw;
        line-height: 175 * @vw;
      }
    }
  }
  .pay_hui {
    width: 1380 * @vw;
    background-color: #ffffff;

    margin: 37 * @vw auto;
  }
  .pay_bom {
    display: flex;
    width: 1380 * @vw;
    border-radius: 50 * @vw;
    margin: 37 * @vw auto;
    padding: 1 * @vw;
    span {
      margin-left: 70 * @vw;
      color: rgb(141, 141, 141);
    }
  }
  .gettime {
    width: 1380 * @vw;
    background-color: #ffffff;
    border-radius: 50 * @vw;
    margin: 37 * @vw auto;
    padding: 1 * @vw;
    p {
      margin-top: 60 * @vw;
      margin-left: 52 * @vw;
      padding-right: 63.3332vw;
    }
  }
}
</style>